<template>
  <div
    v-if="num > 0 || isVisualEditer"
    v-bind="$attrs"
    class="color-tooltip relative pl-[5px] pr-[5px]"
    :class="{
      'rounded-[100px]': num >= 0,
      'rounded-[50%]': num !== 0 && !num,
      'loc-point-mark': !props.element.className
    }"
    @click="handleLocation"
  >
    <NativeTooltip>
      <template v-if="propValue.type === 'error'" #content>
        <AlertTable :twinIds="twinIds" />
      </template>
      <px-tooltip :content="`${propValue.tip}  ${num}`" effect="dark" placement="top">
        <div class="justify-around flex w-[100%] h-[100%] items-center">
          <div
            class="h-[24px] w-[24px] mb-[8px] flex justify-center rounded-[50%] items-center flex-none"
            :class="{ 'bg-[#EF4444]': propValue.type === 'error', 'bg-white': propValue.type !== 'error' }"
          >
            <component :is="imgMap[propValue.type]" class="w-[24px] h-[24px]" :style="`color:${color};`" />
          </div>
          <span v-if="!(num !== 0 && !num)" class="text-[white] text-[18px] font-semibold overflow-ellipsis overflow-hidden whitespace-nowrap">
            <!-- <px-tooltip :content="num" effect="dark" placement="top"> -->
            {{ num }}
            <!-- </px-tooltip> -->
          </span>
          <div v-if="props.propValue.type === 'error'" class="ripple-background">
            <div class="inner-circle" />
          </div>
        </div>
      </px-tooltip>
    </NativeTooltip>
  </div>
</template>
<script setup lang="ts">
import { computed, defineAsyncComponent, inject, onMounted, reactive, ref, toRaw, toRefs, watch } from "vue";
import dayjs from "dayjs";
import { alarmCount } from "@/api/visual/visualConfig";
import AlertTable from "../common/alertTable.vue";
import NativeTooltip from "../common/NativeTooltip.vue";

const isVisualEditer = inject("isVisualEditer", false);
const alarmRoomCounts = inject("alarmRoomCounts", ref(null));
const pageType = inject("pageType", ref(null));
const props = defineProps<{
  propValue?: {
    title: string;
    tip: string;
    routerKey: string;
    type: string;
    num: number;
  };
  remoteData?: { [key: string]: any };
  element?: { [key: string]: any };
}>();
const num = ref(0);
const color = computed(() => {
  if (props.propValue.type === "camera") {
    return "#13C2C2";
  } else if (props.propValue.type === "people") {
    return "#3b82f6";
  } else if (props.propValue.type === "sensor") {
    return "#2893EB";
  } else if (props.propValue.type === "temperature") {
    return "#F59E0B";
  } else if (props.propValue.type === "callin") {
    return "#52C41A";
  } else if (props.propValue.type === "error") {
    return "#EF4444";
  }
  return "#2893EB";
});
const imgMap = {};
const twinIds = ref([]);
let compArr = ["camera", "people", "sensor", "temperature", "callin", "error"];

for (let i = 0; i < compArr.length; i++) {
  let comp = defineAsyncComponent(() => import(`../../assets/filter/${compArr[i]}.svg?component`));

  let name = compArr[i];

  imgMap[name] = comp;
}
onMounted(() => {
  if (props.propValue.type === "error") {
    queryAlarmCount();
    twinIds.value = [props.propValue.routerKey];
  }
});
async function queryAlarmCount() {
  //  "buildingId": "",
  // "floorId": "",
  // "roomId": "",
  // "areaId": "",
  let data = {
    startTime: dayjs().startOf("date").format("YYYY-MM-DD HH:mm:ss"),
    endTime: dayjs().endOf("date").format("YYYY-MM-DD HH:mm:ss"),
    visualizationAlarmFlag: "YES",
    alarmCenterFlag: "YES"
  };
  const routerKey = props.propValue.routerKey;
  if (routerKey.indexOf("BUILD") !== -1) {
    data["buildingId"] = routerKey;
  } else if (routerKey.indexOf("FLOOR") !== -1) {
    data["floorId"] = routerKey;
  } else if (routerKey.indexOf("ROOM") !== -1) {
    data["roomId"] = routerKey;
  } else if (routerKey.indexOf("AREA") !== -1) {
    data["areaId"] = routerKey;
  }
  let res = null;
  if (routerKey.indexOf("ROOM") !== -1 || pageType.value == "FAC" || pageType.value == "BUILD") {
    if (alarmRoomCounts.value) {
      res = alarmRoomCounts.value[routerKey];
      if (res) {
        res = res["alarmNumberDTO"];
      } else {
        res = null;
      }
    }
  } else {
    res = await alarmCount(data);
  }
  if (res) {
    const { undoNumber } = res;
    if (undoNumber) {
      num.value = undoNumber;
    } else {
      num.value = 0;
    }
  }
}
const emits = defineEmits(["generalEvent"]);
const handleLocation = () => {
  if (!props.propValue.routerKey || props.propValue.type !== "error") return;
  try {
    emits("generalEvent", { type: "compRouter", compEmitData: props.propValue.routerKey });
  } catch (e) {
    console.error(e);
  }
};
const generalEvent = () => {
  return;
  // if (!(props.propValue.type === "camera")) {
  //   emits("generalEvent", { type: "compRouter", compEmitData: props.propValue.routerKey });
  // } else {
  //   console.log("摄像机");
  // }
};
</script>
<style lang="scss" scoped>
.color-tooltip {
  background-color: v-bind(color);

  &::after {
    position: absolute;
    top: 96%; /* Position the arrow at the bottom of the div */
    left: 50%; /* Center the arrow */
    content: "";
    border-color: v-bind(color) transparent transparent; /* Create the arrow with borders */
    border-style: solid;
    border-width: 10px;
    transform: translateX(-50%); /* Center the arrow */
  }
}

.ishover {
  background-color: #3b82f6 !important;
}

.ripple-background {
  position: absolute;
  bottom: -40px; /* Position the arrow at the bottom of the div */
  left: calc(50% - 32px); /* Center the arrow */
  width: 64px;
  height: 64px;
}

.ripple-background::before,
.ripple-background::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  content: "";
  background-color: rgb(239 68 68 / 40%); /* Semi-transparent ripple color */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple-effect 3s ease-out infinite;
}

.ripple-background::after {
  background-color: rgb(239 68 68 / 30%); /* Slightly more transparent */
  animation: ripple-effect-2 3s ease-out infinite 1.5s; /* Delay for second ripple */
}

.inner-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  background-color: rgb(239 68 68 / 50%); /* Inner circle with 0.7 opacity */
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

@keyframes ripple-effect {
  0% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.67); /* Expands to 64px */
  }
}

@keyframes ripple-effect-2 {
  0% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3); /* Expands beyond 64px */
  }
}
</style>
